<template>
    <div class="editable-cell">
        <a-input 
            :disabled="!editable" 
            :placeholder="placeholder" 
            class="editable-cell-input" 
            v-model="value" 
            @change="handleChange" 
            @pressEnter="check" 
            
        />
        <a-icon
            v-if="editable" 
            type="check"
            class="editable-cell-icon-check"
            @click="check"
        />
        <a-icon 
            v-if="!editable"
            
            type="edit" 
            class="editable-cell-icon" 
            @click="edit"
        />
    </div>
</template>
<script>
export default {
  name: 'EditableCell',
  props: {
    placeholder:{
      type: String,
      default: '请输入',
    },
    text: String,
  },
  data() {
    return {
      value: this.text,
      editable: false,
    };
  },
  methods: {
    handleChange(e) {
      const value = e.target.value;
      this.value = value;
    },
    check() {
      this.editable = false;
      this.$emit('change', this.value);
    },
    edit() {
      this.editable = true;
    },
  },
  watch: {
    value(newValue) {
      this.$emit('input', newValue)
    }
  },
};
</script>
<style scoped lang="less">
.editable-cell {
  width: 130px;
  height: 21px;
  position: relative;
}

.editable-cell-icon,
.editable-cell-icon-check {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

.editable-cell-icon {
  line-height: 21px;
}

.editable-cell-icon-check {
  line-height: 21px;
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
  color: #108ee9;
}

.editable-cell-input {
  width: 110px;
  height: 100%;
}
</style>
